<template>
    <div>
        <el-card class="form-container" shadow="never">
            <el-steps :active="active" finish-status="success" align-center>
                 <el-step title="填写商品信息"></el-step>
                 <el-step title="填写商品属性"></el-step>
                 <el-step title="选择商品关联"></el-step>
            </el-steps>
            <product-info-detail
                    v-show="showStatus[0]"
                    v-model="productParam"
                    @nextStep="nextStep">
            </product-info-detail>
            <product-sale-detail
               v-show="showStatus[1]"
               v-model="productParam"
               @nextStep="nextStep"
               @prevStep="prevStep">
             </product-sale-detail>
             <product-attr-detail
               v-show="showStatus[2]"
               v-model="productParam"
               @finishCommit="finishCommit"
               @prevStep="prevStep">
             </product-attr-detail>
        </el-card>
    </div>
</template>

<script>
    import ProductInfoDetail from './ProductInfoDetail';
    import ProductSaleDetail from './ProductSaleDetail';
    import ProductAttrDetail from './ProductAttrDetail';
    export default {
        name: "ProductAdd",
        components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail},
        data(){
            return{
                active: 0,
                showStatus: [true, false, false],
                productParam:{
                    categoryId:'',
                    name:'',
                    subtitle:'',
                    mainImage:'',
                    price:'',
                    stock:'',
                    status:2,
                    isNew:'',
                    newStatus:true,
                    //isHot:'',
                    //isBanner:'',
                    subImages:'',
                    detail:'',
                    sellerId:'',
                    brandId:'',
                    spu:'',
                    specificationItems:'',
                    defaultItemId:'',
                    typeTemplateId:'',
                    packageList:'',//商品原价
                    saleService:true,//参加积分兑换
                },
            }
        },
        methods:{
            hideAll() {
                for (let i = 0; i < this.showStatus.length; i++) {
                    this.showStatus[i] = false;
                }
            },
            nextStep() {
                if (this.active < this.showStatus.length - 1) {
                    this.active++;
                    this.hideAll();
                    this.showStatus[this.active] = true;
                }
            },
            prevStep() {
                if (this.active > 0 && this.active < this.showStatus.length) {
                    this.active--;
                    this.hideAll();
                    this.showStatus[this.active] = true;
                }
            },
            finishCommit(){
                this.$confirm('是否要提交该产品', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/product/save.do",{
                        params:{
                            categoryId:this.productParam.categoryId,
                            name:this.productParam.name,
                            subtitle:this.productParam.subtitle,
                            mainImage:this.productParam.mainImage,
                            price:this.productParam.price,
                            stock:this.productParam.stock,
                            isNew:this.productParam.isNew,
                            subImages:this.productParam.subImages,
                            detail:this.productParam.detail,
                        }
                    }).then(res=>{
                        if (res.data.status == 0){
                            this.service.get("/product/manage/productSubTab/save.do",{
                                params:{
                                    sellerId:this.productParam.sellerId,
                                    brandId:this.productParam.brandId,
                                    spu:this.productParam.spu,
                                    specificationItems:this.productParam.specificationItems,
                                    defaultItemId:this.productParam.defaultItemId,
                                    typeTemplateId:this.productParam.typeTemplateId,
                                    packageList:this.productParam.packageList,//商品原价
                                    saleService:this.productParam.saleService,//参加积分兑换
                            }
                            }).then(resp=>{
                                if (resp.data.status ==0){
                                    this.$router.push(
                                        {
                                            name:'商品列表'
                                        });
                                }else{
                                    this.$message.error('商品副表添加错误');
                                }
                            })
                        }else{
                            this.$message.error('商品主表添加错误');
                        }
                    })

                })
            },

        }
    }
</script>

<style scoped>
    .form-container {
        width: 800px;
    }
</style>